<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<base href="http://localhost:8080/vote/" />
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="admin/view.css" />
<link rel="icon" href="/favicon.ico">
<title>投票系统后台管理</title>
</head>
<body class="layui-view-body">
	<div class="layui-content">
		<div class="layui-page-header">
			<div class="pagewrap">
				<h2 class="title">比赛对战情况</h2>
			</div>
		</div>
		<div class="layui-row">
			<div class="layui-card">
				<div class="layui-card-body">
					<div class="form-box">
						<div class="layui-form layui-form-item">
							<div class="layui-inline">
								<div class="layui-form-mid">比赛名称:</div>
								<div class="layui-input-inline" style="width: 100px;">
									<select name="qmatchname" id="qmatchname"></select>
								</div>
								<button class="layui-btn layui-btn-blue" id="query" data-type="reload">查询</button>
								<button class="layui-btn layui-btn-primary" id="reset">重置</button>
							</div>
						</div>
						<button class="layui-btn layui-btn-blue" id="addmatchpk">
							<i class="layui-icon">&#xe654;</i>发布对战
						</button>
						<table id="table" lay-filter="tableTool"></table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 	弹出框 -->
	<div id="content" style="display: none">
		<form id="updatematchpk">
			<table id="data" class="editorTable"
				style="margin: auto; margin-top: 50px; width: 80%;">
				<tr class="layui-form-item">
					<th class="layui-form-label">比赛名称</th>
					<td><select name="amatchname" id="amatchname"></select></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">对战场次</th>
					<td><input type="text" id="battleid" name="battleid"
						class="layui-input-inline" style="width: 62px"/></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">对战选手</th>
					<td><select name="playername1" id="playername1"></select></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">歌曲名</th>
					<td><input type="text" id="firstsongname" name="firstsongname"
						class="layui-input-inline" style="width: 135px"/></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">对战选手</th>
					<td><select name="playername2" id="playername2"></select></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">歌曲名</th>
					<td><input type="text" id="secondsongname" name="secondsongname"
						class="layui-input-inline" style="width: 135px"/></td>
				</tr>
				<tr class="layui-form-item">
					<th class="layui-form-label">比赛状况</th>
					<td><select name="battleflag" id="battleflag">
						<option value="">请选择</option>
						<option value="0">未开始</option>
						<option value="1">开始投票</option>
						<option value="2">暂停投票</option>
						<option value="3">结束投票</option>
					</select></td>
				</tr>
			</table>
		</form>
	</div>
	
	<script src="layui/layui.js"></script>
	<script>
		layui.use([ 'element', 'table', 'form', 'layer', 'jquery', 'laydate', 'upload', 'layedit' ], function(
				element, table, form, layer, $, laydate, upload, layedit) {
			
			//选手姓名下拉框
			
			var $qmatchname=$("#qmatchname");//查询
			var $amatchname=$("#amatchname");//添加
			$qmatchname.append("<option value='' checked>请选择</option>");
			$amatchname.append("<option value='' checked>请选择</option>");
			$.get("matchpk/getallmatchname",function(data){
						var str = "";
          				for(i in data){
          					str = "<option value='"+data[i].matchid+"'>"+data[i].matchname+"</option>"; 
          					$qmatchname.append(str);
          					$amatchname.append(str);
          					form.render('select');
          				}
				},'json');
			
			var $playername1=$("#playername1");//查询
			var $playername2=$("#playername2");//添加
			$playername1.append("<option value='' checked>请选择</option>");
			$playername2.append("<option value='' checked>请选择</option>");
			$.get("player/preplayer",function(data){
						var str = "";
          				for(i in data){
          					str = "<option value='"+data[i].playerid+"'>"+data[i].playername+"</option>";     
          					$playername1.append(str);
          					$playername2.append(str);
          					form.render('select');
          				}
				},'json');
			
			$("#playername2").blur(function(){
				if ($('#playername1').val() == $('#playername2').val()){
					layer.alert("对战选手不能相同");
					$('#playername2').val("");
				}
			});
			
			//展示已知数据
			table.render({
				elem : '#table',
				method : 'post',
				url : 'matchpk/getallmatchpkinfodoc',
				cellMinWidth : 80,
				cols : [ [ {
					field : 'matchname',
					title : '名称',
					sort : true
				}, {
					field : 'battleid',
					title : '对战场次'
				}, {
					field : 'playername1',
					title : '对战选手'
				},{
					field : 'firstsongname',
					title : '歌曲名'
				},{
					field : 'firstticketcount',
					title : '票数'
				},{
					field : 'firstneedscore',
					title : '评委打分',
				},{
					field : 'firstscore',
					title : '最终得分',
				},{
					field : 'playername2',
					title : '对战选手'
				},{
					field : 'secondsongname',
					title : '歌曲名'
				},{
					field : 'firstticketcount',
					title : '票数'
				},{
					field : 'secondneedscore',
					title : '评委打分',
				},{
					field : 'secondscore',
					title : '最终得分',
				},{
					field : 'battleflag',
					title : '比赛状况',
					templet: '#MatchPKInfoTpl'
				},{
					field : 'right',
					title : '操作',
					toolbar : '#barDemo'
				} ] ],
				id : 'testReload',
				where:{
					"matchid" : '',
					"battleid" : ''
				},
				skin : 'line' //表格风格
				,
				even : true,
				page : true //是否显示分页
				,
				limits : [ 5, 7, 10 ],
				limit : 5
			//每页默认显示的数量
			});

			//监听工具条
			table.on('tool(tableTool)', function(obj) { //注：tool是工具条事件名，tableTool是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'del') { //删除
					//console.log("删除");
					layer.confirm('确认删除？',
							function(index) {
								//do something
								$.ajax({
									type : "post",
									url : "matchpk/deletematchpk",
									dataType : 'json',
									
									data : {"matchid": data.matchid,
											"battleid": data.battleid},
									success : function(data) {//成功返回1
										if (data == 1) {
											obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
											layer.close(index);
											layer.msg('成功删除');
										} else {
											layer.msg('删除失败');
										}
									},
									error : function() {
										layer.msg('操作失败');
									}
								});
							});
				} else if (layEvent === 'edit') { //编辑
					$("#battleid").val(data.battleid).attr("readonly","readonly");//设置主键只读
					
					$("#firstsongname").val(data.firstsongname);
					$("#secondsongname").val(data.secondsongname);
					$("#amatchname").find("option[value = '" + data.matchid + "']")
					.attr("selected", "selected");
					$("#amatchname").attr("disabled","disabled"); //设置下拉框不可拉
					
					$("#playername1").find("option[value = '" + data.firstplayer.playerid + "']")
					.attr("selected", "selected");
					$("#playername2").find("option[value = '" + data.secondplayer.playerid + "']")
					.attr("selected", "selected");
					$("#battleflag").find("option[value = '" + data.battleflag + "']")
					.attr("selected", "selected");
					
/* 					console.log(data.matchname);
					console.log(data.matchid);
					console.log(data.battleid);
					console.log(data.firstplayer.playerid);
					console.log(data.secondplayer.playerid);
					console.log(data.battleflag); */
					//do something
					layer.open({
						type : 1,
						title : "编辑客户",
						btn : [ '确定', '取消' ],//yes->添加==btn1->添加,btn2类推对应数组
						area : [ '400px', '450px' ],
						content : $("#content"),
						anim : 3,
						success : function() {
						},
						yes : function() {
							$("#amatchname").removeAttr("disabled"); //重新启用下拉框，目的是传值
							$.ajax({
								url : 'matchpk/updatematchpkdynamic',
								type : 'post',
								dataType : 'text',
								data : $("#updatematchpk").serialize(),
								success : function(data) {
									if (data == 1) {
										layer.msg('修改成功');
										location.reload();
									} else {
										layer.msg('修改失败');
									}
								}
							});
						},
						btn2: function(){
							location.reload();
						}
					});
				}

			});
			
			//顶部查询，有table.reload方法，但mybatis需写动态查询
// 			$("#query").click(function() {
// 				table.render({
// 					elem : '#table',
// 					method : 'post',
// 	 				url : 'employee/findemployeedynamic',
// 					cellMinWidth : 80,
// 					cols : [ [ {
// 						field : 'employeecode',
// 						title : '工号',
// 						sort : true
// 					}, {
// 						field : 'employeename',
// 						title : '姓名'
// 					}, {
// 						field : 'employeebirthday',
// 						title : '生日'
// 					},{
// 						field : 'employeesex',
// 						title : '性别'
// 					},{
// 						field : 'employeeemail',
// 						title : '邮箱'
// 					},{
// 						field : 'employeetel',
// 						title : '电话'
// 					},{
// 						field : 'right',
// 						title : '操作',
// 						toolbar : '#barDemo'
// 					} ] ],
// 					where:{
// 						"employeecode" : $("#qemployeecode").val(),
// 						"employeename" : $("#qemployeename").val(),
// 						"employeesex" : $("#qemployeesex").val(),
// 						"employeeemail" : $("#qemployeeemail").val()
// 					},
// 					skin : 'line' //表格风格
// 					,
// 					even : true,
// 					page : true //是否显示分页
// 					,
// 					limits : [ 5, 7, 10 ],
// 					limit : 5
// 				//每页默认显示的数量
// 				});		
// 			});
			
    //顶部查询，table.reload方法
	var active = {
    	reload: function(){
//       		var demoReload = $('#demoReload');//为了取input的值
          		//执行重载
      		table.reload('testReload', {//testReload:第一次加载table.render中指定的id
        			page: {
          				curr: 1 //重新从第 1 页开始
        					}
        			,where: {
						"matchid" : $("#qmatchname").val()
        			}
      }, 'data');
    }
	}		
	$("#query").on('click', function(){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
	  });
    
	//顶部重置
	$("#reset").on("click",function () {
		$("input[type=text]").val("");
		$("#qmatchname").val("");
	});
			
			//顶部新增
			$("#addmatchpk").click(function() {
				$("#data tr:eq(3)").css("display","none");
				$("#data tr:eq(5)").css("display","none");
// 				$("#companyid").removeAttr("readonly");
				layer.open({
					type : 1,
					title : "发布对战",
					btn : [ '确定', '取消' ],//yes->添加==btn1->添加,btn2类推对应数组
					area : [ '400px', '400px' ],
					content : $("#content"),
					anim : 3,
					success : function() {
						$("#amatchname").removeAttr("disabled");
						$("#data input[type='text']").val("");
						$("#battleid").val("");
						$("#amatchname").val("");
						$("#playername1").val("");
						$("#firstsongname").val("");
						$("#playername2").val("");
						$("#secondsongname").val("");
					},
					yes : function() {
						$.ajax({
							url : 'matchpk/addmatchpk',
							type : 'post',
							dataType : 'text',
							data : $("#updatematchpk").serialize(),
							success : function(data) {
								if (data == 1) {
									layer.msg('添加成功');
									location.reload();
								} else {
									layer.msg('添加失败');
								}
							}
						});
						//display=none
					},
					end: function() {//无论是确认还是取消，只要层被销毁了，end都会执行
// 						$("#companyid").attr("readonly","true");
						$("#data tr:first").css("display","");
					}
				});
			});
		});
	</script>
	<!-- tools -->
	<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script type="text/html" id="MatchPKInfoTpl">
		{{# if (d.battleflag == '0') { }}   
  			未开始
		{{# } else if(d.battleflag == '1') { }}  
  			开始投票
		{{# } else if(d.battleflag == '2') { }}  
  			暂停投票
		{{# } else { }}  
  			结束投票
		{{# } }}
	</script>
</body>
</html>